<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
  <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
  <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">

</head>
<body>

<!--导航-->
<nav class="gird-header">
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui olive header item" style="font-family: STSong">码猿技术专栏</h2>
      <!--<div class="right m-item item m-mobile-hide">-->
        <a href="./index.html" class="m-item item m-mobile-hide "><i class="home icon"></i>首页</a>
        <a href="./types.html" class="m-item item m-mobile-hide"><i class="clone outline icon"></i>分类</a>
        <a href="archives.html" class="m-item item m-mobile-hide"><i class="clock icon"></i>时间轴</a>
        <a href="music.html" class="m-item item m-mobile-hide"><i class="music icon"></i>音乐盒</a>
        <a href="message.html" class="m-item item m-mobile-hide"><i class="book icon"></i>留言板</a>
        <a href="friends.html" class="m-item item m-mobile-hide"><i class="pencil alternate icon"></i>友人帐</a>
        <a href="picture.html" class="m-item item m-mobile-hide"><i class="image icon"></i>照片墙</a>
        <a href="about.html" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
      <!--</div>-->
      <div class="right m-item item">
        <!--                <form name="search" method="post" onsubmit="search(1,10)">-->
        <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
          <input style="color: white" type="text" name="query" id="query"   placeholder="Search....">
          <i class="search link icon" onclick="search()"></i>
        </div>
        <!--                </form>-->
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<!--顶部图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 50%">
  <img src="../static/images/bg.jpg" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
  <div class="m-bg-class_cover">
    <div class="ui container" style="position: relative ;bottom: -540px;">
      <h2 class="m-font-size-title-large" align="center" id="title"></h2>
      <div class="ui container" align="center">
        <div class="ui horizontal link list" align="center">
          <div class="item">
            <div class="ui orange basic label" style="font-size: 7px" id="source"></div>
          </div>
          <div class="item">
            <i class="user outline outline icon m-font-size-text-mini"></i>
            <a href="#" style="color: #ffffff;font-size: 18px" id="authorName">码猿技术专栏</a>
          </div>
          <div class="item">
            <i class="calendar icon m-font-size-text-mini"></i>
            <span class="m-font-size-text-mini" id="createTime"></span>
          </div>
          <div class="item">
            <i class="clone icon m-font-size-text-mini"></i>
            <a href="#" target="_blank" style="color: #ffffff;font-size: 16px" id="typeName"></a>
          </div>
          <div class="item">
            <i class="eye icon m-font-size-text-mini"></i> <span class="m-font-size-text-mini" id="viewNum"></span>
          </div>
          <div class="item">
            <i class="comment outline icon m-font-size-text-mini"></i>
            <span class="m-font-size-text-mini" id="commentNum"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--中间内容-->
<div id="waypoint" class="m-margin- animated fadeIn">
  <div class="ui container m-opacity box-shadow-max">
    <!--内容-->
    <div class="ui attached padded segment">


      <div id="content" class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large">
      <!--TODO 放置文章内容-->

      </div>

      <div class="ui horizontal divider">end</div>


      <!--赞赏-->
      <div hidden="true" id="isAppreciate">
        <div class="ui center aligned basic segment">
          <button id="payButton" class="ui orange basic circular button">赞赏</button>
        </div>
        <div class="ui payQR flowing popup transition hidden">
          <div class="ui orange basic label">
            <div class="ui images" style="font-size: inherit !important;">
              <div class="image">
                <img src="../static/images/zhifupay.jpg" th:src="@{/images/zhifupay.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                <div>支付宝</div>
              </div>
              <div class="image">
                <img src="../static/images/wechatpay.jpg" th:src="@{/images/wechatpay.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                <div>微信</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div id="goto" class="ui attached positive message">
      <!--博客信息-->
      <div class="ui middle aligned grid">
        <div class="nine wide column">
          <ui class="list">
            <li>作者：<span id="authorName2"></span>
<!--              <a href="#" target="_blank">（联系作者）</a>-->
            </li>
            <li>发表时间：<span id="publishTime">2020-01-02 09:08</span></li>
            <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
            <li id="explain1" hidden="true">转载声明：如果是转载栈主转载的文章，请附上原文链接</li>
            <li id="explain2" hidden="true">公众号转载：请在文末添加作者公众号二维码（公众号二维码见右边，欢迎关注）</li>
          </ui>
        </div>
        <!--微信公众号-->
        <div class="seven wide column">
          <img src="../static/images/码猿技术专栏1.jpg" th:src="@{/images/码猿技术专栏1.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 707px">
        </div>
      </div>
    </div>

    <div  class="ui bottom attached segment">
      <!--评论区域列表-->
      <div id="comment-container"  class="ui teal segment">
        <div>
          <div class="ui threaded comments" style="max-width: 100%;" id="comments">
          </div>
        </div>

      </div>


      <div id="comment-form" class="ui form">
        <input type="hidden" id="pid">
        <h3 hidden="true" id="replyH3">回复：<span id="replyName"></span></h3>
        <div class="field">
          <textarea name="content" placeholder="请输入评论信息..." id="comment"></textarea>
        </div>
        <div class="fields">
          <div class="field m-mobile-wide m-margin-bottom-small">
            <div class="ui left icon input">
              <i class="user icon"></i>
              <input type="text" name="nickname" placeholder="姓名" id="nickname">
            </div>
          </div>
          <div class="field m-mobile-wide m-margin-bottom-small">
            <div class="ui left icon input">
              <i class="mail icon"></i>
              <input type="text" name="email" placeholder="邮箱" id="email">
            </div>
          </div>
          <div class="field  m-margin-bottom-small m-mobile-wide">
            <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide" onclick="reply()"><i class="edit icon"></i>发布</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
  <div class="ui vertical icon buttons ">
    <button type="button" class="ui toc teal button" >目录</button>
    <a href="#comment-container" class="ui teal button" >评论</a>
    <div id="toTop-button" class="ui icon button" ><i class="chevron up icon"></i></div>
  </div>
</div>

<div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
  <ol class="js-toc">

  </ol>
</div>

<div id="qrcode" class="ui wechat-qr flowing popup transition hidden "style="width: 130px !important;">
  <!--<img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px !important;">-->
</div>



<br>
<br>
<!--底部栏-->
<footer class="ui inverted vertical segment m-padded-tb-massive m-opacity" id="footer">
</footer>


<script src="https://unpkg.zhimg.com/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-30-M/semantic-ui/2.2.4/semantic.js"></script>
<script src="https://unpkg.zhimg.com/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script src="../static/js/front/js/blog.js"></script>
<script src="../static/js/front/js/nav.js"></script>
<script src="../static/js/front/js/footer.js"></script>

</body>
</html>